<template>
  <div class="net-rank-list" :style="{ ...bg }">
    <div class="ranking" :style="{ ...rankStyle }">{{ ranking }}</div>
    <div class="song-name">{{ songName }}</div>
  </div>
</template>

<script lang="ts">
import { defineComponent, computed } from 'vue'

import { rankListProps } from './props'

export default defineComponent({
  props: rankListProps,
  setup(props) {
    const ranking = computed(() => props.ranking)
    const songName = computed(() => props.text)
    const rankStyle = props.index >2 ? { color: '#000' } : ''
    const bg = props.index % 2 != 1 ? { background: '#dbdbdb' } : ''
    return {
      bg,
      ranking,
      songName,
      rankStyle
    }
  }
})
</script>

<style scoped lang="less">
.net-rank-list {
  flex: 1;
  height: 30px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  .ranking {
    width: 50px;
    color: #c10d1c;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .song-name {
    width: 125%;
    height: 100%;
    font-size: 10px;
    transform: scale(0.8);
    line-height: 30px;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    &:hover {
      cursor: pointer;
      text-decoration: underline;
    }
  }
}
</style>
